<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Calendar Visualization Library: Demo</title>
</head>
<style>
/* optional styling */
#loginControlDiv {
	font-size: 13px;
}

#navControlDiv {
	font-style: "Verdana";
	font-size: 12px;	
}

#navControlDiv input {
  background-color: #CEDD70;
	border: solid #DDD270 1px; 
	font-style: "Verdana";
	font-size: 12px;	
}

#navControlDiv select {
	border: solid black 1px;
	font-style: "Verdana";
	font-size: 12px;	
}

#viewControlDiv input {
  background-color: #CEDD70;
	border: solid #DDD270 1px; 
	font-style: "Verdana";
	font-size: 12px;	
}

#eventDisplayDiv {
	padding: 0px;
	color: black;
	background-color: white;
	font-family: "Verdana";
	font-size: 12px;
	text-align: left;
}


#statusControlDiv {
	font-size: 14px;
	color: white;
  background-color: red;
}

/* required styling */

.columnHeading {
	text-align: center;
	font-size: 12px; 
	color: gray; 
	background-color: #CEDD70; 
	border: solid #DDD270 1px; 
}

.weekViewCell {
	width: 120px;
	height: 270px;
	border: solid #83BC2B 1px;
	text-align: left;
}

.monthViewCell {
	width: 100px;
	height: 95px;
	border: solid #83BC2B 1px;
	text-align: left;
}

.contentCell {
	padding: 2px;
	font-size: 10px;
  border: solid black 0px;
	color: gray; 
	font-family: "Verdana";
	overflow: auto;
}

.eventMouseOver {
	color: white;	
	background-color: #83BC2B;
}

.eventMouseOut {
	color: gray;
	background-color: white;
}
</style>


<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAArM7h3NX7hYkBySUFFdiEOhS6pD_CAwGenrXaHK_tymI-ZPzisxQOcng1sBSziBsjDR1M5LFZ1FM9Gg"></script>
<script type="text/javascript" src="calvis.js"></script>
<script type="text/javascript" src="Dialog.js"></script>

<script type="text/javascript">

window.onload = function() {
  calvis.ready(main);
}

function main() {
  var calId = 'developer-calendar@google.com';

  var calendar = new calvis.Calendar();

  // set the CSS IDs for various visual components for the calendar container
  calendar.setCalendarBody('calendarBodyDiv');
  calendar.setNavControl('navControlDiv');
  calendar.setViewControl('viewControlDiv');
  calendar.setStatusControl('statusControlDiv');
  calendar.setEventCallback('click', displayEvent);

  // set the calenar to pull data from this Google Calendar account
  calendar.setPublicCalendar(calId);  

  calendar.setDefaultView('month');
  // display the calendar
  calendar.render();  

  // global lightbox dialog to display event details
  eventWindow = new Widget.Dialog;


}

function displayEvent(event) {    
  var title = event.getTitle().getText();  
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();  
  var location_ = event.getLocations()[0].getValueString().split('@')[0];

  var eventHtml = [];
  eventHtml.push('<b>Title: </b>');
  eventHtml.push(title);
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>When </b>');
  eventHtml.push(date.toString());
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>Description:</b>');
  eventHtml.push('<p style="font-size: 12px;">');
  eventHtml.push(content); 
  eventHtml.push('</p>');

  eventHtml.push('<b>Where: </b>');
  eventHtml.push(location_);
  eventHtml.push('<br><br>');
  eventHtml.push('<div align="center">');
  eventHtml.push('<table>');
  eventHtml.push('<tr>');
  eventHtml.push('<td>');
  eventHtml.push('<div style="border: 1px solid #CEDD70; width: 300px; height: 300px" id="map"/>');
  eventHtml.push('</td>');
  eventHtml.push('<td>');
  eventHtml.push('<div id="video"></div>');
  eventHtml.push('</td>');
  eventHtml.push('</tr>');
  eventHtml.push('</table>');
  eventHtml.push('</div>');
  
  // after this the eventHtml is in the DOM  tree
  eventWindow.alert(eventHtml.join(''));

  displayMap(location_);
  displayVideo(title);
}      


function displayMap(location_) {

  var geocoder = new GClientGeocoder();
  geocoder.getLatLng(
    location_,
    function(point) {
      if (point) {        
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        map.addOverlay(marker);
      } else {
        document.getElementById('map').parentNode.removeChild(document.getElementById('map'));
      }
    }
  );
}

function getGeocode(json) {
  var mapData = eval(json);
  console.log(mapData);

  var status = mapData.Status.code;
  console.log(status);
  if (status == '200') {
    var lng = mapData.Placemark[0].Point.coordinates[0];
    var lat = mapData.Placemark[0].Point.coordinates[1];
    console.log(lat + ' ' + lng);

    var point = new GLatLng(lat,lng);
    map.setCenter(point, 13);
    map.addOverlay(new GMarker(point));


  }
}

function displayVideo(title) {

  var keywords = title.replace(/ /g, '+');

  var callbackName = 'processYouTubeFeed';

  var youtubeFeed =
    ['http://gdata.youtube.com/feeds/api/videos?callback=',
    callbackName, '&alt=json-in-script&vq=',
    keywords].join('');

  var script = document.createElement('script');
  script.src = youtubeFeed;

  document.body.appendChild(script);
}

function processYouTubeFeed(feed) {
 
  var data = eval(feed);

  if (data.feed.openSearch$totalResults.$t > 0) {

    var url = data.feed.entry[0].link[0].href;
    var id = url.replace('http://www.youtube.com/watch?v=', '');
    var videoUrl = 'http://www.youtube.com/v/' + id;

    var html = [];

    html.push('<object width="250" height="200">');
    html.push('<param name="movie" value="');
    html.push(videoUrl);
    html.push('"></param>');
    html.push('<param name="wmode" value="transparent"></param>');
    html.push('<embed src="');
    html.push(videoUrl);
    html.push('" type="application/x-shockwave-flash"');
    html.push(' wmode="transparent" width="250" height="200">');
    html.push('</embed></object>');

    document.getElementById('video').innerHTML = html.join('');
  }
}

</script>
<body>


  <div style="position: absolute; top: 0px; left: 0px;" id="statusControlDiv"></div>
  <div style="position: absolute; top: 0px; right: 5px;" id="loginControlDiv"></div>

  <div align="center">
    <img src='dot.gif' style='position:absolute; top: -1000px;'>

    <table>
      
      <tr style="text-align: center;" align="left">
        <td valign="top">
          <span style="float: left;" id="navControlDiv"></span>
          <span style="float: right;" id="viewControlDiv"></span>          
        </td>
      </tr> 

      <tr align="center">
        <td valign="top">
          <div id="calendarBodyDiv"></div>
        </td>
      </tr>
    </table>

* Click on events to show details *
  </div>
</body>
</html>